<!-- 人员维度统计-列表 -->
<template>
  <div class="list-body">
    <van-search class="search" show-action v-model="keyword" shape="round" placeholder="请输入员工名称或员工号">
      <template #action>
        <div class="cus-action">
          <span @click="handleFilter" :style="coulist.length > 0 ? 'color:#3975C6;' : 'color:#666666;'">
            {{ coulist.length > 0 ? `已选${coulist.length}` : '筛选' }}
          </span>
          <van-icon :name="showFilterPop ? 'arrow-up' : 'arrow-down'"
            :class="coulist.length > 0 ? 'cus-icon icon-col' : 'cus-icon'" />
        </div>
      </template>
    </van-search>
    <!-- <van-loading size="24px" style="position: relative;top: 3%;" v-if="listLoading" vertical>
      加载中...v-else
    </van-loading> -->
    <div class="tabs-list">
      <van-list v-if="caseList.length > 0" v-model="listLoading" :finished="finished"
        :finished-text="this.searchQry.pagenum > 1 ? '到底了' : ''" @load="onLoad">
        <div class="item" v-for="item in caseList" :key="item.id" @click="openDetail(item)">
          <div class="item-info">
            <div class="info-name">
              <img class="user-img" v-if="item.GND_CODE == 0" src="@/assets/img/man.png" alt="">
              <img class="user-img" v-else src="@/assets/img/woman.png" alt="">
              <span class="title">{{ item.EMPE_NM || '-' }}</span>
              <span class="code">{{ item.EMPE_NO || '-' }}</span>
            </div>
            <!-- <div class="info-status">
            <span v-if="item.status == -1" class="stu1">在职</span>
            <span v-else class="stu2">离职</span>
          </div> -->
          </div>
          <div class="row">
            <span>{{ item.FGS || '-' }}-{{ item.YYB || '-' }}</span>
          </div>
          <div class="row">
            <div class="rowitem">
              <span class="item-key">全部学习案例：</span>
              <span class="item-val">{{ item.TOTAL_NUM || 0 }}</span>
            </div>
            <div class="rowitem">
              <span class="item-key">未学数量：</span>
              <span class="item-val">{{ item.UNFINISHED_NUM || 0 }}</span>
            </div>
            <div class="rowitem">
              <span class="item-key">已学数量：</span>
              <span class="item-val">{{ item.TOTAL_NUM - item.UNFINISHED_NUM || 0 }}</span>
            </div>
            <!-- <span class="left">{{ item.depart }}</span>
          <span class="right">{{ item.jd }}</span> -->
          </div>

        </div>
      </van-list>
      <van-empty v-else description="暂无数据" />
    </div>
    <van-popup class="filter-pop" v-model="showFilterPop">
      <StatisticsPop type="asqed" @on-emit="getQry"></StatisticsPop>
    </van-popup>
  </div>
</template>

<script>
import { getCaseData } from '@/api/case'
import StatisticsPop from './components/statisticsPop.vue'
export default {
  name: 'EmployeeStatistics',
  components: { StatisticsPop },
  props: {
    orgid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      keyword: "",
      showFilterPop: false,
      listLoading: true,
      finished: false,
      caseList: [],
      searchQry: {
        code: '80307',
        pagenum: 0,
        pagesize: 10,
        // sortdatafield,
        // sortorder,
      },
      qrydata: {
        NUM_TYPE: 2, //固定值：2	1按案例统计2按员工统计3案例学习明细4撤销任务
        VAR_DATE_FROM: '',	// 开始时间	eg.20231101
        VAR_DATE_TO: '',	// 结束时间	eg.20231114
        NUM_ORGID: '',	 // 机构代码（分/ 子公司）	必传参数
        VAR_EMPE: '',	 // 员工	
        VAR_PROBLEM: '',	 // 主要违规事项	
        // VAR_DESCRIPTION	 // 违规内容	
      },
      timer: null,
      coulist: [],
    }
  },
  watch: {
    keyword(val) {
      if (this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
        this.searchQry.pagesize = 10	//每页条数	Y	
        this.caseList = []
        if (!val) {
          this.listLoading = true
          this.finished = false
          this.qrydata.VAR_EMPE = ''
        } else {
          this.qrydata.VAR_EMPE = val
        }
        this.getDataList()
      }, 1000)
    }
  },
  created() {
    this.caseList = []
    this.qrydata.NUM_ORGID = this.orgid || this.$route.query.orgid || ''
    this.getDataList()
  },
  mounted() {
    this.$bus.$on('querydata', (objVal) => {
      this.showFilterPop = false
      this.caseList = []
      this.qrydata.VAR_TYPE = objVal.type
      this.qrydata.NUM_YEAR = objVal.year
      this.qrydata.NUM_ORGID = objVal.orgid
      this.getDataList()
    })
  },
  methods: {
    getQry(objVal) {
      this.searchQry.pagenum = 0	//起始页（从0开始）	Y	
      this.searchQry.pagesize = 10	//每页条数	Y	
      this.listLoading = true
      this.finished = false
      this.showFilterPop = false
      this.caseList = []
      this.qrydata.VAR_TYPE = objVal.type
      this.qrydata.NUM_YEAR = objVal.year
      this.qrydata.NUM_ORGID = objVal.orgid
      this.getDataList()
      this.coulist = []
      if (objVal.type) {
        this.coulist.push('a')
      }
      if (objVal.year) {
        this.coulist.push('b')
      }
      if (objVal.bname) {
        this.coulist.push('c')
      }
      if (objVal.cname) {
        this.coulist.push('d')
      }
      // if (objVal.orgid) {
      //   this.coulist.push('c')
      // }
      if (objVal.orgid == this.orgid) {
        this.coulist = []
      }
      this.coulist = Array.from(new Set(this.coulist))
    },
    handleFilter(val) {
      this.showFilterPop = !this.showFilterPop
    },
    onLoad() {
      this.searchQry.pagenum += 1
      this.getDataList()
    },
    async getDataList() {
      let qry = {
        ...this.searchQry,
        params: JSON.stringify(this.qrydata)
      }
      const resData = await getCaseData(qry)
      this.listLoading = false
      this.caseList = [...this.caseList, ...resData.data.VALUE_LIST]
      if (resData.data.VALUE_LIST.length < this.searchQry.pagesize) {
        this.finished = true
      }
    },
    openDetail(rowdata) {
      this.$router.push({
        path: '/employeeStatisticsInfo',
        query: {
          empeid: rowdata.EMPE_ID,
          type: 1, // 合规
          orgid: this.orgid || '',
          activeType: 'asqed',
          rowObj: JSON.stringify(rowdata)
        }
      })
    }
  }

}
</script>

<style scoped lang="less">
.list-body {
  height: 100%;

  /deep/ .search {
    height: 112px;

    .van-search__content {
      height: 72px;

      .van-field {
        display: flex;
        align-items: center;
        justify-content: center;

        .van-field__body {
          height: 100%;
        }
      }
    }

    .cus-action {
      display: flex;
      align-items: center;
      justify-content: center;

      .cus-icon {
        width: 28px;
        height: 28px;
        color: #bbb;
        margin-left: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .van-icon:before {
        vertical-align: middle;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .icon-col {
        color: #3975C6;
      }
    }
  }

  .tabs-list {
    height: calc(100% - 238px);
    overflow: auto;
    // background: green;

    .item {
      height: 202px;
      padding: 0 30px;
      margin-top: 20px;
      background: #fff;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      cursor: pointer;

      .item-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info-name {
          font-size: 26px;
          line-height: 40px;
          color: #333;
          font-weight: 400;
          font-family: SourceHanSansCN, SourceHanSansCN;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .user-img {
            width: 50px;
          }

          .title {
            padding: 0 10px;
          }

          .code {
            color: #7F8389;
          }
        }

        .info-status {
          font-size: 24px;
          line-height: 36px;
          font-family: SourceHanSansCN, SourceHanSansCN;

          .stu1 {
            color: #397FF9;
          }

          .stu2 {
            color: #666;
          }
        }
      }

      .row {
        display: flex;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: 400;
        font-size: 24px;
        color: #7F8389;
        line-height: 36px;
        justify-content: space-between;

        // .left {
        //   display: inline-block;
        //   margin-right: 36px;
        // }
        .rowitem {
          .item-key {
            color: #333333;
          }
        }
      }
    }

    .item:last-child {
      margin-bottom: 20px;
    }
  }

  /deep/ .filter-pop {
    padding: 30px;
    width: 480px;
    max-width: 750px;
    height: calc(100% - 292px);
    bottom: 0;
    top: auto;
    left: auto;
    right: 0;
    min-height: auto;
    transform: none;
  }

  /deep/ .van-overlay {
    bottom: 0;
    top: auto;
    // left: auto;
    // max-width: 750px;
    // width: 100%;
    height: calc(100% - 232px);
  }
}

@media (min-width: 751px) {
  /deep/ .filter-pop {
    left: 50% !important;
  }
}
</style>